<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            /*box-sizing: border-box;*/
        }
        body{
            background: url("img/Beijing05.jpg")  center;
            padding-top: 70px;
        }
        .rg_lyout{
            height: 500px;
            width: 900px;
            border: 8px solid #EEEEEE;
            background: rgba(1,1,1,0.1);
            margin: auto;
            padding-top: 20px;
        }
        #wenzhi{
            color:red;
            font-size: 20px;
        }
        #wenzhi1{
            color:#FFD026;
            font-size: 20px;
        }
        #rg_lyout_p_01{
            color:#A6A6A6;
            font-size: 20px;
        }
        .rg_left{
            /*border: crimson solid 2px;*/
            float: left;
            margin: 15px;
        }
        .rg_center{
            /*border: crimson solid 2px;*/
            float: left;
            color: #EEE;
        }
        .rg_right{
            /*border: #dc143c solid 2px;*/
            float: right;
            margin: 15px;
        }
        .rg_right p{
            font-size: 15px;
        }
        .rg_right p a{
            color: red;
        }

        .td_left{
            width: 100px;
            text-align: right;
            height: 45px;
        }
        .td_right{
            padding-left: 50px;
        }
        #username,#password,#email,#name,#tel,#birthday,#checkcode{
            width: 251px;
            height: 32px;
            border: 1px solid #A6A6A6 ;
            border-radius: 5px;
            padding-left: 10px;
        }
        #checkcode{
            width: 150px;
        }
        #img_check{
            height: 32px;
            vertical-align: middle;
        }
        #btn_sub{
            width: 150px;
            height: 40px;
            background-color: #FFD026;
            border: 1px solid #FFD026 ;
            margin-top: 20px;
        }
        #wei{
            color: #EEEEEE;
            font-size: 20px;
        }
        .front{
            padding-top: 30px;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="registerApp">
        <div class="rg_lyout">
            <div class="rg_left">
                <p id="wenzhi1">新用户注册</p>
                <p id="rg_lyout_p_01">USER REGISTER</p>
            </div>
    
            <div class="rg_center">
                <div class="rg_form">
                    <!--定义表单 form-->
                    <form action="#" method="post">
                        <table>   
                            <tr>
                                <td class="td_left"><label for="username">用户名</label></td>
                                <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名" v-model="userName"></td>
                            </tr>
    
                            <tr>
                                <td class="td_left"><label for="password">密码</label></td>
                                <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码" v-model="password"></td>
                            </tr>
    
                            <tr>
                                <td class="td_left"><label for="password">确认密码</label></td>
                                <td class="td_right"><input type="password" name="password" id="password" placeholder="请再次输入密码" v-model="secondword"></td>
                            </tr>
                            <tr>
                                <td class="td_left"><label for="email">Email</label></td>
                                <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱" v-model="email"></td>
                            </tr>
    
                            
                            <tr>
                                <td class="td_left"><label for="tel">手机号</label></td>
                                <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号" v-model="telephone"></td>
                            </tr>
                            <tr>
                                <td class="td_left"><label for="tel">期望工作地点</label></td>
                                <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入期望工作地点" v-model="address"></td>
                            </tr>
    
                            <tr>
                                <td class="td_left"><label>性别</label></td>
                                <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入性别" v-model="sex"></td>
                            </tr>
    
                        
    
    
                            <tr @click = "registerClick">
                                <td colspan="2" align="center"><input style="text-align: center;"  id="btn_sub" value="注册"></td>
                            </tr>
                        </table>
    
                    </form>
    
    
                </div>
    
            </div>
    
            <div class="rg_right" >
                <p>已有账号?<a href="./login.html">立即登录</a></p>
            </div>
        </div>
        <div class="front">
        
        </div>


    </div>
    
   

    <script src="./js/request.js"></script>
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        // function callbackUserList(e) {
        // 	console.log(e)
        // }

        var vm=new Vue({
            el:'#registerApp',
            data:{
                userName: "",
                password: "",
                secondword: "",
                sex: "",
                telephone: "",
                email: "",
                address: "",
            },
            methods:{
                callbackRegister(e) {
                    if (e.flag && e.data != null && e.code == 20000) {
                        this.userList = e.data
                        console.log(this.userList)
                    } else {
                        window.alert(e.message)
                    }
                },
                registerClick() {
                    if (this.password.length <6) {
                        alert("密码太短")
                    }
                    if (this.password != this.secondword) {
                        alert("两次输入密码不一致")
                    }

                    user = {}
                    if (this.userName != "") {
                        user["userName"] = this.userName
                    }

                    if (this.password != "") {
                        user["password"] = this.password
                    }
                    if (this.telephone  != "") {
                        user["telephone"] = this.telephone
                    }
                    if (this.sex != "") {
                        if (this.sex == '男') {
                            user["sex"] = 0 
                        } else {
                            user["sex"] = 1
                        }
                       
                    }
                    if (this.address != "") {
                        user["address"] = this.address
                    }
                    if (this.email != "") {
                        user["email"] = this.email
                    }
                    console.log(user)
                    // 异步回调
                    addUser(user, this.callbackRegister)
                }
            }
        })
    </script>
</body>
</html>